<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="Top_tilte">
				账户注销
			</view>
			<view class="List_entrance">
				<view class="List_item" v-for="(item,index) in InputList" :key='index'
					:class=" index != 1 ? 'Bottom_boder' : ''">
					<view style="width: 200rpx;">
						{{item.title}}
					</view>
					<view class="input" v-if="index != 1">
						<input type="test" v-model="item.value" disabled :placeholder="item.placeholder" />
					</view>
				</view>
				<view class="List_item">
					<view style="width: 200rpx;">
						验证码
					</view>
					<view class="inputYzm">
						<input class="flex-box" v-model="validate" placeholder="请输入验证码" maxlength="6"
							placeholder-class="col-9" />
						<send-code :mobile="mobile" codeBtnStyle="transparent" :smsType="4" ref="sendCode"
							@checkphone="checkPhone">
						</send-code>
					</view>
					
				</view>
			</view>
			<view class="List_entrance" style="padding: 30rpx;">
				<view
					style="margin-bottom: 30rpx;text-align: center;color: rgba(0, 0, 0, 0.9);font-size: 30rpx;font-weight: bold;">
					注销理由
				</view>
				<view class="textarea_box">
					<textarea class="textarea" placeholder="请填写10字以上的注销理由" placeholder-style="font-size:28rpx"
						maxlength="50" @input="descInput" v-model="desc" />
					<view class="num">{{ desc.length }}/50</view>
				</view>
			</view>
			<view class="choice">
				<view class="icon" @click="Choice()">
					<image v-if="!isChoice" src="@/static/images/user/choice.png" mode=""></image>
					<image v-else src="@/static/images/user/choice1.png" mode=""></image>
				</view>
				<view class="text">
					已阅读并同意<text class="dark"
						@click="showRegisterAgreement('privacy_agreement', privacy_agreement_title)">《用户注销协议》</text>
				</view>
			</view>
			<view class="Submit1" v-if="!isBTN">
				注销
			</view>
			<view class="Submit" v-else @tap.stop.prevent='Submit'>
				注销
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();

	import verify from '../../../utils/verify';
import {
		isPhone,
		isPwd,
		isPositiveInteger,
		isWeixin
	} from "@/utils/verify.js"

	export default {
		components: {},
		data() {
			return {
				InputList: [{
						title: '绑定手机号',
						value: '',
						placeholder: '请输入绑定手机号'
					}
				],
				mobile: '',
				pay_password: 0, // 0，设置密码，1：修改密码
				validate: '',
				token: '',
				isBTN: false,
				desc: '',
				isChoice: false, //勾选协议

			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.token = uni.getStorageSync('token')
			this.InputList[0].value = uni.getStorageSync('userInfo').phone
			this.mobile = this.InputList[0].value
			console.log(uni.getStorageSync('userInfo').phone)
		},
		onShow() {
			// this.$nextTick(() => {
			// 	this.getRandom()
			// })
		},
		// mounted() {
		// 	this.$nextTick(() => {
		// 		this.getRandom()
		// 	})
		// },
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
		},
		created() {},
		methods: {
			descInput(e) {
				console.log(e.detail.value.length, '输入的字数')
			},
			showRegisterAgreement(type, title) {
				console.log(1)
				uni.navigateTo({
					url: `../../login/agreement?type=${type}&title=${title}`
				})
			},
			Choice(){
				this.isChoice = !this.isChoice
				if(this.isChoice){
					if(this.validate == '' || this.validate == null){
						app.showToast('请输入验证码');
						this.isBTN = false
						this.isChoice = false
					}else if(this.desc == '' || this.desc == null){
						app.showToast('请输入注销理由');
						this.isBTN = false
						this.isChoice = false
					}else if(this.desc.length <= 9){
						app.showToast('请输入10字以上的注销理由');
						this.isBTN = false
						this.isChoice = false
					}else{
						this.isBTN = true
					}
				}
			},
			// 点击发送验证码，前校验手机号
			checkPhone() {
				if (!isPhone(this.mobile)) {
					app.showToast('手机号格式不正确');
					return;
				}
				// console.log(this.$refs.sendCode.checkPhoneOk)
				this.$refs.sendCode.checkPhoneOk();
			},
			//点击添加
			Submit() {
				let _this = this
				this.isBTN = false
				app._post_form('user/userLogout', {
					reason: _this.desc,
					smscode: _this.validate
				}, function(result) {
					if (1 == result.code) {
						app.showToast('注销成功');
						setTimeout(() => {
							uni.clearStorageSync();
							uni.reLaunch({
								url: '/pages/index/index'
							});
							// location.href('http://app.liangcang.online/h5/')
						}, 1500)

					}
				}, null, function() {
					// 解除按钮禁用
					_this.isBTN = true
					app.showError(result.msg);
				});
			},
		}
	}
</script>

<style lang="scss">
	.container {
		height: 100vh;
	}

	.Bottom_boder {
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.Top_tilte {
		margin-top: 40rpx;
		width: 100%;
		height: 80rpx;
		background-color: #FFFFFF;
		text-align: center;
		color: rgba(0, 0, 0, 0.9);
		font-size: 30rpx;
		font-weight: bold;
		line-height: 80rpx;
	}

	.List_entrance {
		margin: 0 30rpx;
		margin-top: 50rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 4rpx 6rpx 1rpx rgba(0, 0, 0, 0.02);
		padding: 0 30rpx;

		.List_item {
			height: 100rpx;
			background-color: #FFF;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.9);

			input {
				font-size: 28rpx;
			}

			.input {
				input {
					width: 400rpx;

				}
			}

			.inputYzm {
				height: 48rpx;
				display: flex;
				align-items: center;

				input {
					width: 224rpx;
				}

				.yzm {
					font-weight: 600;
					font-size: 24rpx
				}
			}
		}
	}

	.Submit {
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #f00;
		color: #fff;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}

	.Submit1 {
		color: #fff;
		width: 92%;
		margin: 0 30rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #999;
		position: fixed;
		bottom: 114rpx;
		border-radius: 10rpx;
	}

	.textarea_box {
		padding: 20rpx;
		background-color: #F2F2F2;

		/deep/ .uni-textarea-textarea {
			font-size: 28rpx;
			line-height: 45rpx;
		}

		.num {
			text-align: right;
			color: gray
		}
	}

	.choice {
		margin: 30rpx;
		display: flex;
		position: fixed;
		bottom: 200rpx;
		.icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			line-height: 40rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.6);
		}
	}
</style>
